<template>
    <a-spin :spinning="isLoading" :delay="30" style="position: relative" id="loading-mask">
        <a-icon slot="indicator" type="loading"
                style="font-size: 124px;margin-left: -62px;margin-top: -62px" spin/>
        <LayoutBasic>
            <!--头部-->
            <transition name="fadeTop">
                <layout-header v-if="showHeader"/>
            </transition>
            <!--下面的部分-->
            <LayoutContentBasic>
                <!--左侧侧边栏-->
                <transition name="fadeLeft" mode="out-in">
                    <router-view name="leftBar"/>
                </transition>
                <!--内容区域-->
                <LayoutContent>
                    <keep-alive v-if="$route.meta.keepAlive">
                        <router-view />
                    </keep-alive>
                    <router-view v-else/>
                </LayoutContent>
                <!--右侧侧边栏-->
                <transition name="fadeRight" mode="out-in">
                    <router-view name="rightBar"/>
                </transition>
            </LayoutContentBasic>
        </LayoutBasic>
    </a-spin>
</template>
<script>
    import LayoutBasic from '@/components/layout/LayoutBasic';
    import LayoutContentBasic from '@/components/layout/LayoutContentBasic';
    import LayoutContent from '@/components/layout/LayoutContent';
    import LayoutHeader from '@/components/layout/LayoutHeader';
    // 引入补间动画
    export default {
        name: 'App',
        components: {LayoutHeader, LayoutContent, LayoutContentBasic, LayoutBasic},
        computed: {
            showHeader () {
                return this.$store.state.showHeader;
            },
            isLoading () {
                return this.$store.state.loading;
            },
        },
        watch: {
            $route (to, from) {
                if (to.fullPath === '/login') {
                    this.$store.commit('closeHeader');
                } else {
                    this.$store.commit('openHeader');
                }
                // 如果路由对象需要缓存，记录离开前的位置
                if (from.meta.keepAlive) {
                    from.meta.savedPosition = document
                        .getElementById('layout-content').scrollTop;
                }
            },
        },
        mounted () {
            // 引入媒体查询
            this.$enquire.register('screen and (min-width: 1250px)', {
                match: function () {
                    console.log('👿');
                },
                unmatch: function () {
                    console.log('😊');
                },
            });
        },
        methods: {
            getPopupContainer (trigger) {
                return trigger.parentElement;
            },
        },

    };
</script>
<style scoped lang="scss">
    .fadeLeft-enter-active, .fadeLeft-leave-active {
        transition: all 0.3s 0.3s;
    }

    .fadeLeft-enter, .fadeLeft-leave-to {
        transform: translate3d(-270px, 0, 0);
    }

    .fadeRight-enter-active, .fadeRight-leave-active {
        transition: all 0.3s 0.3s;
    }

    .fadeRight-enter, .fadeRight-leave-to {
        transform: translate3d(400px, 0, 0);
    }

    .fadeTop-enter-active, .fadeTop-leave-active {
        transition: all 0.3s 0.3s;
    }

    .fadeTop-enter, .fadeTop-leave-to {
        transform: translate3d(0, -270px, 0);
    }

</style>

